服务热线
2024 年九月，一家做商用净水设备的厂找我们重做官网。他们年营收差不多九千万，产品线有二十多个型号，官网每天大约两百六十个独立访客，六成来自手机。改版前后台拉出来的数据里最刺眼的一条：产品详情页平均停留三十八秒，跳出率七十三。老板第一反应以为是内容不行，我们打开他原来的网站设计稿，第一眼就卡在正文上——全站正文十二像素，行高一点三五，段落之间几乎没留白，技术参数一长串挤在一段里，手机上划两下眼睛就累了。那不是内容的问题，是读者还没读进去就已经被排版劝退了。
客户的设计稿沿用了 PC 时代十四像素的习惯，移动端直接等比例缩放，结果小屏上字小得像蚂蚁。我们做了个对照测试：拿同一篇产品介绍页，正文十五像素时一屏能装下四段，十七像素时只能装三段，每加一像素，单屏信息密度就掉一截。最后定的方案是分端处理——PC 端正文十六像素，移动端十六像素起步、长文给到十七像素。别小看这一到两像素的差别，十六像素在四寸屏上的可读性，比十四像素高出一个档次；而十七像素再往上，留白带来的疲惫感反而盖过了清晰度带来的好处。我们最终没选十八像素，是因为内部测试里十八像素让首屏只露出两条参数，采购方划到第三屏才看到核心指标的概率明显下降。把字号写死成一个数、不分端考虑，是很多老网站最常犯的错。
字号定了，行高和段距是第二道关。原来的稿子行高一点三五，行与行几乎贴在一起，连续读五段就开始晕。我们试了三档：一点五、一点六五、一点八。一点五在手机上还勉强能读，落到 PC 大屏上字就被拉得太散；一点八无论哪个端都显空，读起来像在念 PPT 备注。最终 PC 端定一点七五、移动端定一点七。段距我们没用首行缩进，而是每段之间留零点八到一倍的行距空白——中英文混排时，首行缩进两个字符常常和英文单词的换行位置打架，不如直接靠空行把段落切开。这个细节在原来的网站设计里被忽略了，所有段落贴成一堵墙，读者分不清哪里是一段、哪里是另一段。
最棘手的是技术参数。客户给的 Excel 有三十多列，原来整张表塞进一个区块，手机上要横向滑动才能看完，很多人滑两下就关了。在网站设计里，参数表要不要拆、怎么拆，是比配色更影响可读性的事。我们把它拆成「核心参数」和「完整参数」两层：核心参数固定展示六到八项，完整参数收进可展开的区域，默认收起。拆完之后，移动端不用横滑，采购方在前两屏就能拿到他最在意的流量、电压、滤芯寿命三项。这里的关键不是把字写小塞进去，而是先替读者把信息分层——他第一时间要的，和回头要查的，根本不是同一批。
改版上线六周，产品页平均停留从三十八秒拉到七十一秒，跳出率从七十三掉到五十四。但我要把话说清楚，表单提交量只涨了不到一成——排版优化救不回内容本身的薄弱，它只负责让该读的人读得下去。反例也有：我们曾把「关于我们」那栏的字号一路推到十八像素，结果那页停留不升反降，因为一屏装不下三条信息，访客觉得啰嗦就划走了。做网站设计时容易盯着视觉炫不炫，其实读者先感受到的是字挤不挤、段与段清不清楚。可读性不是锦上添花，它是内容能不能被看见的前置条件。
复盘完这家厂，我留下两条能直接用的经验。第一，正文可读性先分端定字号，移动端十六到十七像素是甜区，别拿 PC 习惯直接套手机，更别图省事把字号写死。第二，行高一点七左右、段落靠空行而非首行缩进切分，比把所有字挤在一起更经读，参数这类高密度信息一定先分层再展示。网站设计的专业度，往往不在炫酷的视觉效果，而就藏在这些看不见的毫米和像素里。
地址：江苏天圣达yy易游app下载创新中心B栋901
电话：133 0619 4366 / 189-2129-2689
邮箱：sales@jizankeji.com
服务品牌建设与数字营销
